<template>
  <div class="editapireturnexample">
    <div class="returnexample">
      <span class="requestbodyspan1">&nbsp;返回示例</span>
    </div>
    <div class="editApiContent">
      <el-tabs type="border-card">
        <el-tab-pane label="成功示例">
          <div class="editApisussce">
            <div class="editApisussceheaderdiv1">
            <span>示例调用地址：</span>
              <span>https://result.eolinker.com/hqxvM3Laea2d53c58014309b4219ff9370b8bef103055c9?uri=/demo/user/register</span>
            <span type="text" style="float: right;color: #3c763d">复制成功</span>
            </div>
            <div class="editApisussceheaderdiv2">
            <span class="fs12 plr5 ptb2 mr5">HTTP Status Code:{{editData.successStatusCode}}</span>
            <span class="fs12 plr5 ptb2 mr5">Content-Type:{{editData.successContentType}}</span>
            </div>
            <div style="height: 300px">
              <editapicompiler :form="form" :value='svalue' @changeFormFun="changeFormFun"></editapicompiler>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="失败示例">
          <div class="editApisussce">
            <div class="editApisussceheaderdiv1">
              <span>示例调用地址：</span>
              <span>https://result.eolinker.com/hqxvM3Laea2d53c58014309b4219ff9370b8bef103055c9?uri=/demo/user/register</span>
              <span type="text" style="float: right;color: #3c763d">复制成功</span>
            </div>
            <div class="editApisussceheaderdiv2">
              <span class="fs12 plr5 ptb2 mr5">HTTP Status Code:{{editData.failStatusCode}}</span>
              <span class="fs12 plr5 ptb2 mr5">Content-Type:{{editData.failContentType}}</span>
            </div>
          </div>
          <div v-if="editData.failMock!=null" style="height: 300px">
            <editapicompiler :form="form"  :value='fvalue' @changeFormFun="changeFormFun"></editapicompiler>
          </div>
          <div  v-else class="editApisussceheaderdiv3">
            <div style="margin-top: 100px">
            <span>暂未填写失败结果</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import editapicompiler from './editapicompiler'
  export default {
    name: 'apiTags',
    props: {
      form: {},
      editData: {}
    },
    data() {
      return {
        svalue: this.editData.successMock,
        fvalue: this.editData.failMock,
        dataArr: this.form
      }
    },
    components: {
      editapicompiler
    },
    methods: {
      changeFormFun(data) {
        this.form = data
        console.log(this.form)
      },
      burlChangeVal() {
        this.$emit('changeFormFun', this.dataArr)
      }
    }
  }
</script>

<style scoped>

</style>
